'use client'

import { GlobalOutlined } from '@ant-design/icons'
import { Input } from 'antd'
import { useRouter } from 'next/navigation'
import { useState, useEffect } from 'react'

const { Search } = Input

export default function SearchBox({ type, value, resultCount }) {

    const router = useRouter()
    const [searchValue, setSearchValue] = useState(() => (''))

    const onChange = (e) => {
        setSearchValue(() => (e.currentTarget.value))
    }

    const onSearch = (value, _e, info) => {
        router.push(`/search?q=${value}`)
    }

    useEffect(() => {
        setSearchValue(() => (value))
    }, [value])

    return (
        <div 
            className={`
                    flex items-center
                    ${type === 'vertical' ? 'flex-col' : ''}
                `}
            >
            <div className='pt-6 flex'>
                <GlobalOutlined 
                    style={{ 
                        color: '#34b7b9',
                        fontSize: '28px',
                    }}
                />
                <div 
                    className={`
                        ml-4
                        ${type === 'horizontal' ? 'w-24' : ''}
                    `}
                >
                    <span className='text-2xl text-primary'>
                        关联检索
                    </span>
                </div>
            </div>
            <div className={`pt-6 w-[561px]`}>
                <Search
                    className={`
                        ${type === 'vertical' ? 'mt-10' : ''}
                        ${type === 'horizontal' ? 'ml-6' : ''}
                    `}
                    // allowClear
                    enterButton="检索"
                    size="large"
                    value={searchValue}
                    onChange={onChange}
                    onSearch={onSearch}
                />
                {/* {typeof resultCount === 'number'
                ? (
                    <div className='ml-9'>
                        <span className='text-sm text-gray-400'>
                            为你找到相关结果{resultCount}个
                        </span>
                    </div>
                )
                : (null)} */}
            </div>
        </div>
    )
}